<script>
import { deleteFilmAjax, getFilmListAjax } from '@/data/FilmData'
import FilmEdit from '@/views/film/FilmEdit.vue'
import { getActorListAjax } from '@/data/ActorData'
import { getCategoryListAjax } from '@/data/CategoryData'

const searchForm = {}
export default {
  name: 'FilmList',
  components: { FilmEdit },
  data () {
    return {
      searchForm: { ...searchForm },
      dataList: [],
      actorList: [],
      categoryList: []
    }
  },
  methods: {
    getDataList () {
      const res = getFilmListAjax(this.searchForm)
      if (res.code === 200) {
        this.dataList = [...res.data]
      }
    },
    getActorList () {
      const res = getActorListAjax()
      if (res.code === 200) {
        this.actorList = [...res.data]
      }
    },
    getCategoryList () {
      const res = getCategoryListAjax()
      if (res.code === 200) {
        this.categoryList = [...res.data]
      }
    },
    clear () {
      this.searchForm = { ...searchForm }
      this.getDataList()
    },
    deleteUser (id) {
      this.$confirm(`确定删除编号[${id}]的数据吗?`, { type: 'info' }).then(() => {
        const res = deleteFilmAjax(id)
        if (res.code === 200) {
          this.$message.success('删除成功！')
          this.getDataList()
        } else {
          this.$alert(res.msg, { type: 'error' })
        }
      }).catch(() => {})
    },
    showDialog (id) {
      this.$refs.filmEdit.getFilm(id)
    }
  },
  created () {
    this.getDataList()
    this.getActorList()
    this.getCategoryList()
  }
}
</script>

<template>
  <div>
    <el-card>
      <el-form inline :model="searchForm" label-width="80px">
        <el-form-item label="电影名">
          <el-input v-model="searchForm.name" placeholder="请输入电影名" clearable/>
        </el-form-item>
        <el-form-item label="导演">
          <el-select v-model="searchForm.actorId" clearable filterable>
            <el-option v-for="actor in actorList" :key="actor.id" :value="actor.id" :label="actor.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="searchForm.categoryId" clearable filterable>
            <el-option v-for="category in categoryList" :key="category.id" :value="category.id" :label="category.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" clearable filterable>
            <el-option :value="1" label="可用"/>
            <el-option :value="2" label="禁用"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList">查询</el-button>
          <el-button @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-button @click="showDialog()" style="margin-bottom: 10px">添加</el-button>
      <el-table border :data="dataList">
        <el-table-column prop="id" label="编号"/>
        <el-table-column prop="name" label="电影名"/>
        <el-table-column prop="actor.name" label="导演名"/>
        <el-table-column prop="category.name" label="分类名"/>
        <el-table-column prop="profile" label="电影介绍" show-overflow-tooltip />
        <el-table-column prop="status" label="电影状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success">可用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="showDialog(scope.row.id)">修改</el-button>
            <el-button type="text" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <film-edit ref="filmEdit" @close="getDataList"/>
  </div>
</template>

<style scoped>

</style>
